<template>
	<view class="cu-card">
		<view class="card-header">
			<text class="create-time">预约时间：{{dateFormat}}</text>
		</view>
		<view class="content">
			<text class="card-info">类型：{{proType}}</text>
			<text class="card-info">重量：{{proWeight}}</text>
			<text class="card-info">地址：{{address}}</text>
			<text class="card-info">备注：{{remark}}</text>
		</view>
		<view class="capture">
			<view v-if="orderForm.imageList.length" class="image-list">
				<ImageItem
					v-for="item in imageList"
					class="image-item-wrap"
					:key="item.uuid"
					:uuid="item.uuid"
					:src="item.url"
					@delete="handleDelPhoto"
				/>
			</view>
			<view v-if="imageList.length < 3" class="photo-plus border-radius-sm" @click="handleSelPhoto">
				<uni-icons type="camera-filled" size="40" color="#808080"></uni-icons>
			</view>
		</view>
		<button v-if="status === 1" style="margin-top: 40rpx;" class="btn-primary block card-btn" @click="handleFast">抢单</button>
		<button v-if="status === 2" style="margin-top: 40rpx;" class="btn-primary block card-btn" @click="handleCancel">取消订单</button>
		<button v-if="status === 3" style="margin-top: 40rpx;" class="btn-primary block card-btn" @click="handleArrive">已到达</button>
		<button v-if="status === 4" style="margin-top: 40rpx;" class="btn-primary block card-btn" @click="handleConfirm">完成订单</button>
	</view>
</template>

<script>
	import ImageItem from '@/components/cu-image-item/cu-image-item.vue'
	import { mapGetters } from 'vuex'
	import dayjs from 'dayjs'
	export default {
		name: "CuCard",
		components: {
			ImageItem
		},
		props: {
			id: {
				type: String,
				required: true
			},
			createTime: {
				type: String,
				default: ''
			},
			type: {
				type: Number
			},
			weight: {
				type: Number
			},
			address: {
				type: String,
				default: ''
			},
			remark: {
				type: String,
				default: ''
			},
			status: { // 1: 抢单  2: 取消订单  3: 已到达 4: 完成订单
				type: String
			},
			distance: {
				type: Number
			},
			images: {
				type: String
			}
		},
		data() {
				return {
					imageList: []
				}
		},
		computed: {
			...mapGetters(['types', 'weights']),
			dateFormat() {
				if (!this.createTime) {
					return ''
				} else {
					return dayjs(Number(this.createTime)).format('YYYY-MM-DD HH:mm:ss')
				}
			},
			proType() {
				const currType = this.types.filter(item => item.value === this.type)
				if(currType.length) {
					return currType[0].label
				} else {
					return ''
				}
			},
			proWeight() {
				const currWeight = this.weights.filter(item => item.value === this.weight)
				if(currWeight.length) {
					return currWeight[0].label
				} else {
					return ''
				}
			}
		},
		methods: {
			// 拍照
			handleSelPhoto() {
				
			},
			// 抢单
			handleFast() {
				this.$emit('active', this.id)
			},
			// 取消订单
			handleCancel() {
				this.$emit('cancel', this.id)
			},
			// 已到达
			handleArrive() {
				this.$emit('arrive', this.id)
			},
			// 完成订单
			handleConfirm() {
				this.$emit('confirm', this.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
.cu-card {
	border-radius: 8rpx;
	box-shadow:0px 3px 4px 0px #F0F0F0;
	background: $white;
	margin-bottom: 20rpx;
	.card-header {
		border-bottom: 1px solid $uni-border-color;
		padding: 20rpx;
	}
	.content {
		padding-top: 20rpx;
		.card-info {
			display: block;
			padding: 10rpx 20rpx;
		}
	}
	.capture {
		.image-list {
			height: 160rpx;
			display: inline-block;
			float: left;
			margin-right: 10rpx;
			padding-bottom: 50rpx;
		}
		.image-item-wrap {
			margin-right: 10rpx;
		}
		.photo-plus {
			width: 160rpx;
			height: 160rpx;
			border: 1rpx solid $uni-border-color;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
